<template>
    <div class="mkdz-wrapper">
        <div class="all-module">
            <div class="module-title">未选模块</div>
            <draggable v-model="allList" element="ul" :options="dragOptions">
                <transition-group>
                    <li v-for="(item, index) in allList" class="menu-item" :key="item.name">
                        <div class="menu-icon" :style="`background:url('/src/assets/img/${item.icon}.png')`"></div>
                        <div class="menu-name">{{item.name}}</div>
                    </li>
                </transition-group>
            </draggable>
        </div>
        <div class="select-module">
            <div class="module-title">已选模块</div>
            <draggable element="span" v-model="selectList" :options="dragOptions">
                <transition-group tag="ul">
                    <li v-for="(item, index) in selectList" class="menu-item" :key="item.name">
                        <div class="menu-icon" :style="`background:url('/src/assets/img/${item.icon}.png')`"></div>
                        <div class="menu-name">{{item.name}}</div>
                    </li>
                </transition-group>
            </draggable>
        </div>
        <div class="mkdz-btn">
            <el-button size="small" @click="reset"><i class="fa fa-gear"></i> 重置</el-button>
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" @click="save" type="primary"><i class="fa fa-save"></i> 保存</el-button>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import _ from 'lodash'
import {getModule} from '../../scripts/moduleTransform'

export default {
    name: 'mkdz',
    data: function() {	
        return {
            allList: null,
            selectList: [],
            dragOptions :{
                group: 'menu',
                ghostClass: 'ghost'
            }
        }
    },
    components: {
        draggable
    },
    methods: {
        cancel() {
            this.getList();
        },
        save(){
            let newMk = [];
            _.forEach(this.selectList, item=>{
                newMk.push(item.route)
            })
            newMk = newMk.join(",");
            this.$$http('EDIT_USER_INFO', localStorage.userid, {userid:localStorage.userid, mk: newMk}).then(data=>{
                localStorage.mk = data.mk;
                this.$message({
                    message: '模块自定义成功',
                    type: 'success'
                })
                location.reload();
            })
        },
        reset() {
            this.$confirm('确定重置？', '提示', {
                confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(()=>{
                this.$$http('EDIT_USER_INFO', localStorage.userid, {userid:localStorage.userid, mk: ''}).then(data=>{
                    localStorage.mk = '';
                    location.reload();
                })
            })
        },
        getList() {
            let that = this;
            setTimeout(function() {
                getModule('select').then(data=>{
                    that.selectList = data;
                });
                getModule('unselect').then(data=>{
                    that.allList = data
                })
            }, 500);
        }
    },
    mounted() {
        this.getList();
    }
}
</script>

<style lang="scss">
.mkdz-wrapper{
    border:2px solid #2873a6;
    position: relative;
    height: 500px;
    .line{
        height: 100%;
        float: left;
        background: #000;
        width: 2px;
    }
    .module-title{
        color:white;
        background: #2873a6;
        display: block;
        text-align: center;
        // font-size: 16px;
        // margin-bottom: 15px;
        padding: 10px 0 15px 0;
        
    }
    .select-module{
        width: 50%;
        height: 50%;
        position: relative;
        float: left;
        &>span{
            height: 100%;
            &>ul{
                height: 100%;
            }
        }

        // width: 0;
        .save-btn{
            position: absolute;
            width:120px;
            left: 1080px;
            top: 10px;
        }
    }
    .all-module{
        width: calc(50%);
        height: 100%;
        float: left;
        border-right: 2px solid #2873a6;
        position: relative;
        ul{
            height: 50%;
            span{
                display: block;
                height: 100%;
            }
        }
    }
    .ghost {
        opacity: .5;
    }
    .menu-item{
        // position: absolute;
        display: block;
        transition: .4s ease;
        float: left;
        margin: 12px;
        user-select: none;
        cursor: move;
        .menu-icon{
            width: 70px;
            height: 70px;
            background-size: cover!important;
        }
        .menu-name{
            width: 70px;
            text-align: center;
            font-size: 12px;
            margin-top: 4px;
        }
    }
    .mkdz-btn{
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
}
</style>